<template>
  <el-dialog width="70%" :title="title" v-model="visible" :close-on-click-modal="false" draggable>
    <div v-loading="state.loading">

      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="state.queryForm" ref="queryRef">
          <!--          患者姓名-->
          <el-form-item label="患者姓名" prop="customerName">
            <el-input v-model="state.queryForm.customerName" placeholder="请输入患者姓名"/>
          </el-form-item>
          <!--          就诊卡号-->
          <el-form-item label="就诊卡号" prop="medicalCard">
            <el-input v-model="state.queryForm.medicalCard" placeholder="请输入就诊卡号"/>
          </el-form-item>
          <!--          身份证号-->
          <el-form-item label="身份证号" prop="icCard">
            <el-input v-model="state.queryForm.icCard" placeholder="请输入身份证号"/>
          </el-form-item>

          <el-form-item>
            <el-button @click="queryBtn" formDialogRef icon="search" type="primary">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" formDialogRef icon="Refresh">{{
                $t('common.resetBtn')
              }}
            </el-button>
          </el-form-item>

        </el-form>
      </el-row>

      <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar
              v-model:showSearch="showSearch"
              class="ml10 mr20"
              style="float: right"
              @queryTable="getDataList">
          </right-toolbar>
        </div>
      </el-row>

      <el-table height="calc(100vh - 400px)" :data="state.dataList" border
                :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" highlight-current-row
                @sort-change="sortChangeHandle">
        <el-table-column label="#" width="60">
          <template #default="scope">
            {{ state.pagination.size * (state.pagination.current - 1) + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="doctorCode" label="医生工号" show-overflow-tooltip/>
        <el-table-column prop="doctorName" label="医生姓名" show-overflow-tooltip/>
        <el-table-column prop="visitDept" label="就诊科室" show-overflow-tooltip/>
        <el-table-column prop="icCard" label="身份证号" width="180" show-overflow-tooltip/>
        <el-table-column prop="medicalCard" label="就诊卡号" show-overflow-tooltip/>
        <el-table-column prop="customerName" label="患者姓名" show-overflow-tooltip/>
        <el-table-column prop="visitTime" label="就诊时间" width="180" show-overflow-tooltip/>
        <el-table-column prop="visitEndTime" label="结束就诊时间" width="180" show-overflow-tooltip/>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                  v-bind="state.pagination"/>
    </div>
  </el-dialog>
</template>
<script setup lang="ts" name="allSign">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {
  getDirectionRecordsList
} from "/@/api/blood/bloodFamilyDoctor";

const visible = ref(false);
const title = ref('');
const showSearch = ref(true);
const queryRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getDirectionRecordsList,
  descs: ['visitTime'],
})

const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  tableStyle
} = useTable(state);

const openDialog = (doctorCode: string, startTime: string, endTime: string) => {
  queryRef.value?.resetFields();
  visible.value = true;
  if (doctorCode) {
    state.queryForm.doctorCode = doctorCode;
  }
  if (startTime) {
    state.queryForm.startTime = startTime;
  }
  if (endTime) {
    state.queryForm.endTime = endTime;
  }
  getDataList()
};

const queryBtn = () => {
  getDataList();
};

const resetQuery = () => {
  queryRef.value?.resetFields();
  getDataList();
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
